<template>
  <div v-title="'系统权限 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="content-box MkSystemPermission">
      <mk-permission :perms="['Ticket:SystemManagement:Authority:create']">
      <div class="marginBottom-20 textAlignRight">
        <router-link :to="{name:'addSystemPermission',params:{id: '0'}}">
          <el-button type='primary' class='btn-create'>新增权限</el-button>
        </router-link>
      </div>
      </mk-permission>

      <div class='positionList'>
        <template v-if='roleList.length>0'>
          <div v-for="role in roleList">
            <span class='fontColorTwo'>{{role.name}}</span>

            <el-popover placement="left" title="" trigger="hover" popper-class='MkPopover_tip' v-if="hasPermission">
              <div>
                <mk-permission :perms="['Ticket:SystemManagement:Authority:update']">
                <div class='tipBtn' @click='editPosition(role)'>修改</div>
                </mk-permission>
                <mk-permission :perms="['Ticket:SystemManagement:Authority:delete']">
                <div class='tipBtn' @click='deletePosition(role)'>删除</div>
                </mk-permission>

              </div>
              <i class='el-icon-more cursorPointer floatRight'
                 style="margin-right:40px;line-height: 100px;font-size:18px;color:#c6cdd2;" slot="reference"></i>
            </el-popover>

          </div>
        </template>
        <template v-else>
          <div class='noDataStyle'>
            <img src="../../../assets/img/no_customer_result.png" alt="">
            <div class=''>空空哒~ 什么都没有~</div>
          </div>
        </template>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
    import MkPermission from "../../../components/MkPermission";
  import permissionService from '../../../services/setting'
  export default {
    name: 'MkSystemPermission',
    components: {
      MkBreadcrumb, MkPermission
    },

    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      roleList: state => state.staff.roleData
    }),

    mounted: function () {
      this.$store.dispatch('loadRole');
      this.hasPermission = this.$utils.hasPermission(['Ticket:SystemManagement:Authority:update', 'Ticket:SystemManagement:Authority:delete'], 'or');
    },

    methods: {
      deletePosition(role) {
        this.$confirm('您是否确认删除此权限?', '删除权限', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'confirmBox_warning'
        }).then(() => {

          permissionService.httpDeleteRole({"id": role.id}, result => {
            this.$message.success('删除成功');
            this.$store.dispatch('loadRole');
          });
        }).catch(() => {
        });
      },
      editPosition(role) {
        this.$router.push({name: 'addSystemPermission', params: {id: role.id}});
      }
    },
    data () {
      return {
        hasPermission: true,
        breadcrumbData: {
          list: {
            first: {name: '系统设置', path: null, isClickAble: false},
            second: {name: '系统权限', path: null, isClickAble: false}
          },
          menuIconStyle: 'settingIconStyle'
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import '../../../assets/style/main.less';
  .MkSystemPermission {
    .positionList {
      > div {
        margin-bottom: 10px;
        line-height: 100px;
        padding-left: 40px;
        height: 100px;
        background-color: @whiteColor;
      }
    }
    .noDataStyle {
      width: 100%;
      padding: 150px 0;
      background-color: @whiteColor;
      text-align: center;
      color: #c6cdd2;
      > img {
        margin-bottom: 20px;
      }
    }
  }
</style>
